<template>
  <div class="container-box white-bk flex-par">
    <div class="login-content">

      <div class="login-head flex-par">
        <img class="page-logo" src="../assets/image/logo.png" alt="">
        <div>鄂电“悟空”RPA共享平台</div>
      </div>
      <div class="login-box">
        <div class="login-header-txt text-c">欢迎使用鄂电<span class="blue-color">“悟空”</span>RPA共享平台</div>
        <div class="login-self">
          <div>
            <el-input class="login-item margin-b-20" placeholder="请输入账号" clearable v-model="loginName"
              @keyup.enter="loginF">
            </el-input>
            <el-input class="login-item margin-b-10" type="password" clearable placeholder="请输入密码" show-password
              v-model="password" @keyup.enter="loginF">
            </el-input>
            <div class="flex-par">
              <el-input class="login-item margin-b-10 yzm" type="text" placeholder="请输入图形验证码" v-model="myYzm"
                @keyup.enter="loginF">
              </el-input>
              <div class="yzmcode">
                <img class="float-l active-style" :src="codeImg" @click="getCodeImg" alt="">
                <!-- <v-sidentify ref="sidentify" @getData="getData"></v-sidentify> -->
              </div>
            </div>
            <!-- <div class="text-l margin-b-20">
              <el-checkbox v-model="checked">记住密码</el-checkbox>
            </div> -->
            <div class="flex-par margin-b-20">
              <div class="login-b-txt blue-color active-style" @click="goToHome">
                直接进入首页
              </div>
            </div>
            <div class="text-l margin-b-10">
              <el-button type="primary" class="width-percent-100"
                style="    background: rgba(0, 72, 143, 1);height: 50px;border-radius: 5px;font-size: 18px;"
                @click="loginF">登 录</el-button>
            </div>
            <!--<div class="flex-par">
              <div class="login-b-txt">
                <el-checkbox v-model="checked">我已同意并阅读<span class="green-color-web active-style">《用户使用协议》</span></el-checkbox>
              </div>
            </div> -->

          </div>
        </div>
      </div>
    </div>
    <div class="login-txt flex-son">
      <div class="login-icon-box text-c white-color">
        <img src="../assets/image/login-icon.png" class="login-icon" alt="">
        <div class="login-txt-1">鄂电<span class="yellow-color">“悟空”</span>RPA共享平台</div>
        <div class="login-txt-2">解锁物联网无尽效能，以智能节点织就全域业务网</div>
      </div>
    </div>
  </div>
</template>
<script>
import { serverUrl, loginWeb } from '@/assets/api/api.js';

export default {
  data() {
    return {
      serverUrl,
      loginName: '',
      password: '',
      codeImg: '',
      // input2: '',
      // checked: true,
      // yzmflag: true, //该值变化，就会触发刷新
      yzmcode: '', //刷新后的验证码
      myYzm: '',
    };
  },
  // components: {
  //   'v-sidentify': Sidentify,
  // },
  methods: {
    getCodeImg() {
      this.codeImg = this.serverUrl + "/admin/captcha?" + Math.random();
    },
    // getData(data) {
    //   //console.log(data);
    //   this.yzmcode = data
    // },
    // 切换验证码
    // refreshCode() {
    //   this.yzmflag = !this.yzmflag;
    // },
    // getMakedCode(yzmcode) {
    //   this.yzmcode = yzmcode;
    // },
    loginF() {
      loginWeb({
        userName: this.loginName,
        password: this.password,
        verifyCode: this.myYzm,
      })
        .then((res) => {
          if (res.code == 0) {
            // let info = res.data.info
            //console.log(info)
            localStorage.clear();
            localStorage.setItem('token', res.data)
            this.$message({
              message: '登录成功',
              type: 'success',
              center: true,
            });
            setTimeout(() => {
              this.$router.push({ path: '/' });
            }, 1200);
          } else {
            //console.log('else')
            this.getCodeImg()
          }
        })
        .catch((err) => { });

    },
    goToHome() {
      this.$router.push({ path: '/' });
    },
    // getMyInfo() {
    //   getUserInfo()
    //     .then((res) => {
    //       if (res.code == 0) {
    //         localStorage.clear();
    //         localStorage.setItem('myroleid', res.data.roleId);
    //         setTimeout(() => {
    //           this.$router.push({ path: '/' });
    //         }, 1200);
    //       }
    //     })
    //     .catch((err) => { });
    // },
  },
  mounted() {
    console.log(111)
    this.getCodeImg()
    // window.addEventListener('resize', () => {
    // this.getBk();
    // });
  },
};
</script>

<style scoped>
.page-logo {
  width: 45px;
  margin-right: 16px;

}

.container-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: this;
}

.login-bk {
  position: absolute;
  left: 0;
  width: 80%;
  bottom: 0;
  max-height: 100%;
  min-width: 1000px;
}

.login-content {
  width: 60%;
  background-color: #E5ECFA;
  position: relative;
}

.login-box {
  background: white;
  width: 540px;
  height: 460px;
  border-radius: 10px;
  box-shadow: 0px 0px 12px rgba(29, 21, 96, 0.109803921568627);
  position: absolute;
  left: calc(50% - 270px);
  top: calc(50% - 230px);
}

.login-header-txt {
  font-size: 28px;
  font-weight: 700;
  color: #000;
  padding: 30px 0;
}

.login-self {
  /* left: 0px;
  top: 0px;
  width: 510px;
  height: 440px;
  background-image: none;
  border: none;
  border-radius: 0px;
  -webkit-box-shadow: none;
  box-shadow: none;
  padding: 0 20px; */
  width: 510px;
  height: 340px;
  background-image: none;
  border: none;
  border-radius: 0px;
  -webkit-box-shadow: none;
  box-shadow: none;
  padding: 0 20px;
}

.login-head {
  letter-spacing: 1px;
  font-size: 24px;
  font-weight: 500;
  color: #003C7E;
  height: 45px;
  line-height: 45px;
  margin-left: 10%;
  margin-top: 5%
}

.type-radio {
  margin-bottom: 20px;
}

.type-radio div {
  flex: 1;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #a1a1a1;
  line-height: 48px;
  border-bottom: 4px #cccccc solid;
}

.type-radio div.action-dom {
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: #18cca8;
  line-height: 48px;
  border-bottom: 6px #18cca8 solid;
}

.login-item {
  height: 50px;
  margin-bottom: 25px;
}

.login-item /deep/ .el-input__wrapper {
  background: white;
  border-radius: 6px;
  border: 1px solid #dcdfe6;
}

.yzm /deep/ .el-input__wrapper {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.login-item /deep/ input {
  background: transparent;
  color: #333;
  outline: none;
}

.login-b-txt {
  font-size: 14px;
}

.login-item /deep/ .el-input-group__append {
  background: white !important;
  width: auto !important;
}

.yzmcode,
.yzmcode img {
  width: 160px;
  height: 45px;
}

.login-txt {
  background: linear-gradient(0deg, rgba(35, 25, 110, 1) 0%, rgba(6, 8, 41, 1) 99%);
}

.login-icon-box {
  position: relative;
  top: calc(50% - 330px);
}

.login-icon {
  width: 440px;
  height: 520px;
  /* position: relative;
  left: calc(50% - 220px); */
}

.login-txt-1 {
  font-size: 28px;
  font-weight: 500;
  margin-top: 50px;
}

.yellow-color {
  color: yellow;
}

.login-txt-2 {
  font-size: 20px;
  margin-top: 14px;
}
</style>
